mermaid.js:C4 diagram
C4 model
C4 diagram
C4 Diagrams | Mermaid
code:c4.mermaid
C4Context
title System Context diagram for Internet Banking System
Enterprise_Boundary(b0, "BankBoundary0") {
Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
Person(customerB, "Banking Customer B")
Person_Ext(customerC, "Banking Customer C", "desc")
Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
Enterprise_Boundary(b1, "BankBoundary") {
SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
System_Boundary(b2, "BankBoundary2") {
System(SystemA, "Banking System A")
System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")
}
System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
Boundary(b3, "BankBoundary3", "boundary") {
SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")
SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
}
}
}
BiRel(customerA, SystemAA, "Uses")
BiRel(SystemAA, SystemE, "Uses")
Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
Rel(SystemC, customerA, "Sends e-mails to")
UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
Building C4 Diagrams in Mermaid
System Context Diagram
code:scd.mermaid
flowchart TB
subgraph personalBankingCustomerPersonal Banking Customer
h1-Person-:::type
d1A customer of the bank, with \n personal bank accounts:::description
end
personalBankingCustomer:::person
subgraph internetBankingSystemInternet Banking System
h2-Software System-:::type
d2Allows customers to view \n information about their bank \n banks, and make payments:::description
end
internetBankingSystem:::internalSystem
subgraph mainframeBankingSystemMainfram Banking System
h3-Software System-:::type
d3Stores all of the core banking \n information about customers, \n accounts, transactions etc:::description
end
mainframeBankingSystem:::externalSystem
subgraph emailSystemEmail System
h4-Software System-:::type
d4The internal Microsoft Exchange \n email system:::description
end
emailSystem:::externalSystem
personalBankingCustomer--Views account \n balances, and \n makes payments \n using-->internetBankingSystem
internetBankingSystem--Gets accounts \n information from, \n and makes \n payments using-->mainframeBankingSystem
internetBankingSystem--Sends emails using--> emailSystem
emailSystem--Sends emails to-->personalBankingCustomer
%% Element type definitions
classDef person fill:#08427b
classDef internalSystem fill:#1168bd
classDef externalSystem fill:#999999
classDef type stroke-width:0px, color:#fff, fill:transparent, font-size:12px
classDef description stroke-width:0px, color:#fff, fill:transparent, font-size:13px
Container Diagram
code:cd.mermaid
flowchart TB
subgraph personalBankingCustomerPersonal Banking Customer
h1-Person-:::type
d1A customer of the bank, with \n personal bank accounts:::description
end
personalBankingCustomer:::person
personalBankingCustomer--Visits bigbank.com using HTTPS-->webApplication
personalBankingCustomer--Views account \n balancs, and \n makes payments \n using-->singlePageApplication
personalBankingCustomer--Views account \n balancs, and \n makes payments \n using-->mobileApp
subgraph internetBankingSystemInternet Banking System
subgraph webApplicationWeb Application
direction LR
h2Container: Java and Spring MVC:::type
d2Delivers the static content and the \n Internet banking single page \n application:::description
end
webApplication:::internalContainer
subgraph singlePageApplicationSingle Page Application
direction LR
h3Container: JavaScript and Angular:::type
d3Provides all of the Internet banking \n fuctionality to customers via their \n web browser:::description
end
singlePageApplication:::internalContainer
subgraph mobileAppMobile App
direction LR
h4Container: Xamarin:::type
d4Provides a limited subset of the \n Internet banking functionality to \n customers via their mobile device:::description
end
mobileApp:::internalContainer
subgraph apiApplicationAPI Application
direction LR
h5Container: Java and Spring MVC:::type
d5Provides Internet banking \n functionality via a JSON/HTTP API:::description
end
apiApplication:::internalContainer
subgraph databaseDatabase
direction LR
h6Container: Oracle Database Schema:::type
d6Stores user registration information, \n hashed authentication credentials, \n access logs, etc:::description
end
database:::internalContainer
webApplication--Delivers to the \n customer's web \n browser-->singlePageApplication
singlePageApplication--Makes API calls to-->apiApplication
mobileApp--Makes API calls to-->apiApplication
apiApplication--Reads from and \n writes to-->database
end
apiApplication--Sends emails using-->emailSystem
apiApplication--Makes API calls to-->mainframeBankingSystem
subgraph mainframeBankingSystemMainfram Banking System
h98-Software System-:::type
d98Stores all of the core banking \n information about customers, \n accounts, transactions etc:::description
end
mainframeBankingSystem:::externalSystem
subgraph emailSystemEmail System
h99-Software System-:::type
d99The internal Microsoft Exchange \n email system:::description
end
emailSystem:::externalSystem
emailSystem--Sends emails to-->personalBankingCustomer
%% Element type definitions
classDef person fill:#08427b
classDef internalContainer fill:#1168bd
classDef externalSystem fill:#999999
classDef type stroke-width:0px, color:#fff, fill:transparent, font-size:12px
classDef description stroke-width:0px, color:#fff, fill:transparent, font-size:13px
Container Diagram
code:cod.mermaid
flowchart TB
subgraph singlePageApplicationSingle Page Application
direction LR
h3Container: JavaScript and Angular:::type
d3Provides all of the Internet banking\nfuctionality to customers via their\nweb browser:::description
end
singlePageApplication:::internalContainer
subgraph mobileAppMobile App
direction LR
h4Container: Xamarin:::type
d4Provides a limited subset of the\nInternet banking functionality to\ncustomers via their mobile device:::description
end
mobileApp:::internalContainer
subgraph databaseDatabase
direction LR
h6Container: Oracle Database Schema:::type
d6Stores user registration information, \n hashed authentication credentials, \n access logs, etc:::description
end
database:::internalContainer
subgraph mainframeBankingSystemMainfram Banking System
h98-Software System-:::type
d98Stores all of the core banking \n information about customers, \n accounts, transactions etc:::description
end
mainframeBankingSystem:::externalSystem
subgraph emailSystemEmail System
h99-Software System-:::type
d99The internal Microsoft Exchange \n email system:::description
end
emailSystem:::externalSystem
singlePageApplication--Make API calls to-->signInController
singlePageApplication--Make API calls to-->resetPasswordController
singlePageApplication--Make API calls to-->accountsSummaryController
mobileApp--Make API calls to-->signInController
mobileApp--Make API calls to-->resetPasswordController
mobileApp--Make API calls to-->accountsSummaryController
subgraph apiApplicationAPI Application
subgraph signInControllerSign In Controller
direction LR
h10Component: Spring MVC Rest Controller:::type
d10Allows users to sign in to the Internet \n Banking System:::description
end
signInController:::internalComponent
subgraph resetPasswordControllerReset Password Controller
direction LR
h20Component: Spring MVC Rest Controller:::type
d20Allows users to reset their passwords \n with a single use URL:::description
end
resetPasswordController:::internalComponent
subgraph accountsSummaryControllerAccounts Summary Controller
direction LR
h30Component: Spring MVC Rest Controller:::type
d30Provides customers with a summary \n of their bank accounts:::description
end
accountsSummaryController:::internalComponent
subgraph securityComponentSecurity Component
direction LR
h40Component: Spring Bean:::type
d40Provides functionality related to \n signing in, changing passwords, etc:::description
end
securityComponent:::internalComponent
subgraph emailComponentEmail Component
direction LR
h50Component: Spring Bean:::type
d50Sends emails to users:::description
end
emailComponent:::internalComponent
subgraph mainframeBankingSystemFacadeMainframe Banking System Facade
direction LR
h60Component: Spring Bean:::type
d60A facade onto the mainframe \n banking system:::description
end
mainframeBankingSystemFacade:::internalComponent
signInController--Uses-->securityComponent
resetPasswordController--Uses-->securityComponent
resetPasswordController--Uses-->emailComponent
accountsSummaryController--Uses-->mainframeBankingSystemFacade
end
securityComponent--Reads from and \n writes to-->database
emailComponent--Sends email using-->emailSystem
mainframeBankingSystemFacade--Uses-->mainframeBankingSystem
%% Element type definitions
classDef person fill:#08427b
classDef internalContainer fill:#1168bd
classDef internalComponent fill:#4b9bea
classDef externalSystem fill:#999999
classDef type stroke-width:0px, color:#fff, fill:transparent, font-size:12px
classDef description stroke-width:0px, color:#fff, fill:transparent, font-size:13px
#mermaid.js